<template>
  <div>
    <!-- 基本信息 -->
    <div class="box">
      <div class="title-con">
        <div class="title">
          <i class="line" />
          <span style="color:#000">基本信息</span>
          <div class="link-title" />
        </div>

        <div class="title">
          <i class="line" />
          <span style="color:#000">借款信息</span>
          <div class="link-title" />
        </div>
      </div>
      <table class="table-width">
        <tr class="tr-width">
          <td><div class="info-name">手机号</div></td>
          <td><div class="info">{{ userBaseInfo.user.phone }}</div></td>
          <td class="info-name"><div class="info-name">借款用途</div></td>
          <td>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.loanReason===0" class="info">农业养殖</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.loanReason===1" class="info">个体经营</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.loanReason===2" class="info">教育培训</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.loanReason===3" class="info">医疗美容</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.loanReason===4" class="info">出行旅游</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.loanReason===5" class="info">餐饮消费</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.loanReason===6" class="info">购置生活用品</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.loanReason===7" class="info">其他贷款</div>
          </td>
        </tr>
        <tr>
          <td><div class="info-name">教育程度</div></td>
          <td>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.highestEdu===1" class="info">初中及以下</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.highestEdu===2" class="info">高中/中专技校</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.highestEdu===3" class="info">专科</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.highestEdu===4" class="info">本科</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.highestEdu===5" class="info">研究生</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.highestEdu===6" class="info">博士及以上</div>
          </td>
        </tr>
        <tr>
          <td><div class="info-name">婚姻状况</div></td>
          <td>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.maritalStatus===1" class="info">已婚</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.maritalStatus===2" class="info">未婚</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.maritalStatus===3" class="info">离异</div>
          </td>

        </tr>
        <tr>
          <td><div class="info-name">负债情况</div></td>
          <td><div class="info">{{ userBaseInfo.name }}</div></td>

        </tr>
        <tr>
          <td><div class="info-name">居住情况(房产)</div></td>
          <td>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.houseOwner===1" class="info">出租房</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.houseOwner===2" class="info">借住房</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.houseOwner===3" class="info">个人房</div>
          </td>

        </tr>
      </table>
    </div>
    <!-- 联系信息 -->
    <div class="box">
      <div class="title-con">
        <div class="title">
          <i class="line" />
          <span style="color:#000">联系方式</span>
          <div class="link-title" />
        </div>

        <div class="title">
          <i class="line" />
          <span style="color:#000">联系人信息</span>
          <div class="link-title-5" />
        </div>
      </div>
      <table class="table-width">
        <tr>
          <td><div class="info-name">邮箱地址</div></td>
          <td><div class="info">{{ userBaseInfo.user?userBaseInfo.user.email : '' }}</div></td>
          <td><div class="info-name">联系人姓名</div></td>
          <td><div class="info">{{ userBaseInfo.userContactMes?userBaseInfo.userContactMes.contactOneName : '' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">居住地(省/市/区)</div></td>
          <td><div class="info">{{ userBaseInfo.userMes?userBaseInfo.userMes.provinceAndCity : '' }}</div></td>
          <td><div class="info-name">联系人手机号</div></td>
          <td><div class="info">{{ userBaseInfo.userContactMes?userBaseInfo.userContactMes.contactOnePhone : '' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">居住地(详细地址)</div></td>
          <td><div class="info">{{ userBaseInfo.userMes?userBaseInfo.userMes.addressDetail: '' }}</div></td>
          <!-- <td><div class="info-name">婚姻状况</div></td>
            <td><div class="info">{{ userBaseInfo.contactPhone }}</div></td> -->
        </tr>
      </table>
    </div>

    <!-- 职业信息 -->
    <div class="box">

      <div class="title">
        <i class="line" />
        <span style="color:#000">职业信息</span>
        <div class="link-title" />
      </div>


      <table class="table-width">
        <tr>
          <td><div class="info-name">所属行业</div></td>
          <td><div class="info">{{ userBaseInfo.userMes?userBaseInfo.userMes.businessInfo : '' }}</div></td>
          <td><div class="info-name">办公电话</div></td>
          <td><div class="info">{{ userBaseInfo.userMes?userBaseInfo.userMes.companyPhone : '' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">工作职业</div></td>
          <td><div class="info">{{ userBaseInfo.userMes?userBaseInfo.userMes.jobInfo: '' }}</div></td>
          <td><div class="info-name">单位所在地(省/市/区)</div></td>
          <td><div class="info">{{ userBaseInfo.userMes?userBaseInfo.userMes.companyAddressDetail: '' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">月薪</div></td>
          <td>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.income===1" class="info">2000-5000元</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.income===2" class="info">5000-1万元</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.income===3" class="info">1万-1.5万元</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.income===4" class="info">1.5-2万元</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.income===5" class="info">2万-2.5万元</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.income===6" class="info">2.5万-3万元</div>
            <div v-if="userBaseInfo.userMes && userBaseInfo.userMes.income===7" class="info">3万元及以上</div>
          </td>
          <td><div class="info-name">单位所在地(详细地址)</div></td>
          <td><div class="info">{{ userBaseInfo.userMes?userBaseInfo.userMes.companyAddressDetail : '' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">单位名称</div></td>
          <td><div class="info">{{ userBaseInfo.userMes?userBaseInfo.userMes.companyName : '' }}</div></td>

        </tr>
      </table>
    </div>
    <!-- 身份证信息 -->
    <div class="box">

      <div class="title">
        <i class="line" />
        <span style="color:#000">身份证信息</span>
        <div class="link-title" />
      </div>


      <table class="table-width">
        <tr>
          <td><div class="info-name">姓名</div></td>
          <td><div class="info">{{ userBaseInfo.userLiveOcrLog?userBaseInfo.userLiveOcrLog.name:'' }}</div></td>
          <td><div class="info-name">身份证正面</div></td>
          <td rowspan="3"><div class="info-img"><img class="info-img" :src="userBaseInfo.userLiveOcrLog?userBaseInfo.userLiveOcrLog.certFrontImageUrl:''" alt=""></div></td>
        </tr>
        <tr>
          <td><div class="info-name">性别</div></td>
          <td><div class="info">{{ userBaseInfo.userLiveOcrLog?userBaseInfo.userLiveOcrLog.sex ===1?'男':'女':'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">名族</div></td>
          <td><div class="info">{{ userBaseInfo.userLiveOcrLog?userBaseInfo.userLiveOcrLog.ethnicity:'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">身份证号</div></td>
          <td><div class="info">{{ userBaseInfo.userLiveOcrLog?userBaseInfo.userLiveOcrLog.certNo:'' }}</div></td>
          <td><div class="info-name">身份证反面</div></td>
          <td rowspan="3"><div class="info-img"><img class="info-img" :src="userBaseInfo.userLiveOcrLog?userBaseInfo.userLiveOcrLog.certBackImageUrl:''" alt=""></div></td>
        </tr>
        <tr>
          <td><div class="info-name">户口所在地</div></td>
          <td><div class="info">{{ userBaseInfo.userLiveOcrLog?userBaseInfo.userLiveOcrLog.certAddress:'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">生日</div></td>
          <td><div class="info">{{ userBaseInfo.userLiveOcrLog?userBaseInfo.userLiveOcrLog.birthday:'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">签发机构</div></td>
          <td><div class="info">{{ userBaseInfo.userLiveOcrLog?userBaseInfo.userLiveOcrLog.signingOrganization:'' }}</div></td>
          <td><div class="info-name">手持身份证</div></td>
          <td rowspan="3"><div class="info-img" style="opacity: 0;"><img src="http://bhyp.oss-cn-hangzhou.aliyuncs.com/adminImg/logo.png" alt=""></div></td>
        </tr>
        <tr>
          <td><div class="info-name">签发日期</div></td>
          <td><div class="info">{{ userBaseInfo.userLiveOcrLog ? userBaseInfo.userLiveOcrLog.certValidTime?userBaseInfo.userLiveOcrLog.certValidTime.split('-')[0]:'':'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">过期日期</div></td>
          <td><div class="info">{{ userBaseInfo.userLiveOcrLog ? userBaseInfo.userLiveOcrLog.certValidTime?userBaseInfo.userLiveOcrLog.certValidTime.split('-')[1]:'':'' }}</div></td>
        </tr>
      </table>
    </div>
    <!-- 活体信息 -->
    <div class="box">
      <div class="title">
        <i class="line" />
        <span style="color:#000">活体信息</span>
        <div class="link-title" />
      </div>
      <table class="table-width">
        <tr>
          <td><div class="info-name">最佳人体图片</div></td>
          <td rowspan="3"><div class="info-img"><img class="info-img" :src="userBaseInfo.userLiveOcrLog ?userBaseInfo.userLiveOcrLog.livingImageOne:''" alt=""></div></td>
          <td rowspan="3"><div class="info-img" style="opacity: 0;"><img src="http://bhyp.oss-cn-hangzhou.aliyuncs.com/adminImg/logo.png" alt=""></div></td>
          <td rowspan="3"><div class="info-img" style="opacity: 0;"><img src="http://bhyp.oss-cn-hangzhou.aliyuncs.com/adminImg/logo.png" alt=""></div></td>
        </tr>

        <tr>
          <td><div class="info-name" style="opacity: 0;"> 1</div></td>
        </tr>
        <tr>
          <td><div class="info-name" style="opacity: 0;"> 1</div></td>
        </tr>
        <tr>
          <td><div class="info-name">人脸对比结果</div></td>
          <td><div class="info">{{ userBaseInfo.contactName }}</div></td>

        </tr>
      </table>
    </div>
    <!-- 银行卡信息 -->
    <div class="box">
      <div class="title">
        <i class="line" />
        <span style="color:#000">银行卡信息</span>
        <div class="link-title" />
      </div>
      <table class="table-width">
        <tr>
          <td><div class="info-name">银行卡号</div></td>
          <td><div class="info">{{ userBaseInfo.userAccount? userBaseInfo.userAccount.cardNo:'' }}</div></td>
          <td><div class="info-name">银行卡开户人手机号</div></td>
          <td><div class="info">{{ userBaseInfo.userAccount?userBaseInfo.userAccount.phone:'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">银行卡所属银行名称</div></td>
          <td><div class="info">{{ userBaseInfo.userAccount?userBaseInfo.userAccount.cardOrg:'' }}</div></td>
          <td><div class="info-name">银行卡开户人身份证号</div></td>
          <td><div class="info">{{ userBaseInfo.userAccount?userBaseInfo.userAccount.idcard:'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">银行卡开户人姓名</div></td>
          <td><div class="info">{{ userBaseInfo.userAccount?userBaseInfo.userAccount.name:'' }}</div></td>

        </tr>
      </table>
    </div>
    <!-- 设备信息 -->
    <div class="box">
      <div class="title">
        <i class="line" />
        <span style="color:#000">设备信息</span>
        <div class="link-title" />
      </div>
      <table class="table-width">
        <tr>
          <td><div class="info-name">IP地址</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice? userBaseInfo.userDevice.ip:'' }}</div></td>
          <td><div class="info-name">idfv</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.idfv:'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">操作系统</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.brand:'' }}</div></td>
          <td><div class="info-name">SIM卡插卡状态</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.simCardStatus===0? '未插卡' : '已插卡' :'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">设备型号</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.model:'' }}</div></td>
          <td><div class="info-name">是否为模拟器</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice? userBaseInfo.userDevice.emulator ===0? '否' : '是' :'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">设备类型</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.clientType===1?'苹果' :'安卓' :'' }}</div></td>
          <td><div class="info-name">是否已经刷机</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.contactName:'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">系统版本号</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.deviceSystem :'' }}</div></td>
          <td><div class="info-name">mac地址</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.mac:'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">设备唯一识别符</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.androidId:'' }}</div></td>
          <td><div class="info-name">WiFiMAC</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.wifiMac:'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">IOS广告标识符</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.idfa:'' }}</div></td>
          <td><div class="info-name">WiFiName</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.wifiName :'' }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">imei</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.imei:'' }}</div></td>
          <td><div class="info-name">手机当前网络类型</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.networkType :'' }}</div></td>
        </tr>
      </table>
    </div>
    <!-- 定位、应用信息 -->
    <div class="box">
      <div class="title-con">
        <div class="title">
          <i class="line" />
          <span style="color:#000">定位信息</span>
          <div class="link-title" />
        </div>

        <div class="title">
          <i class="line" />
          <span style="color:#000">应用列表</span>
          <div class="link-title" />
        </div>
      </div>
      <table class="table-width">
        <tr class="tr-width">
          <td><div class="info-name">GPS定位省市区</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice?userBaseInfo.userDevice.gpsAddress:'' }}</div></td>
          <td class="info-name"><div class="info-name">应用名称</div></td>
          <td :rowspan="userBaseInfo.userAppInfos ? (userBaseInfo.userAppInfos.length+1):1"><div v-for="(item,index) in userBaseInfo.userAppInfos" :key="index" class="info">{{ item.appName }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">GPS定位详细地址</div></td>
          <td><div class="info">{{ userBaseInfo.phone }}</div></td>
        </tr>
        <tr>
          <td><div class="info-name">GPS定位经度</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice ? userBaseInfo.userDevice.gps ?userBaseInfo.userDevice.gps.split('-')[0]:'':'' }}</div></td>

        </tr>
        <tr>
          <td><div class="info-name">GPS定位纬度</div></td>
          <td><div class="info">{{ userBaseInfo.userDevice ? userBaseInfo.userDevice.gps ?userBaseInfo.userDevice.gps.split('-')[1]:'':'' }}</div></td>

        </tr>

      </table>
    </div>
    <!-- 通讯录 -->
    <div class="box">
      <div class="title">
        <i class="line" />
        <span style="color:#000">通讯录</span>
        <div class="link-title" />
      </div>

      <table class="table-width">
        <tr class="tr-width">
          <td><div class="info-name">通讯录列表</div></td>
          <td colspan="3">
            <el-table
              :key="tableKey"
              :data="userBaseInfo.userPhoneContactsInfos"
              border
              fit
              highlight-current-row
              style="width: 90%;margin-top:10px;margin-left:5%;"
            >

              <el-table-column label="序号" min-width="100" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="姓名" class-name="status-col" min-width="100">
                <template slot-scope="{row}">
                  <span>{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="手机号" class-name="status-col" min-width="160">
                <template slot-scope="{row}">
                  <span>{{ row.phone }}</span>
                </template>
              </el-table-column>
            </el-table>
          </td>
        </tr>
        <tr>
          <td><div class="info-name">类别名称</div></td>
          <td><div class="info">{{ userBaseInfo.phone }}</div></td>
          <td><div class="info-name" style="opacity: 0;">1</div></td>
          <td><div class="info" style="opacity: 0;">1</div></td>
        </tr>
      </table>

    </div>


    <!-- 用户查看过的产品 -->
    <div class="box">
      <div class="title">
        <i class="line" />
        <span style="color: #000">用户查看过的产品</span>
        <div class="link-title" style="width: calc(100% - 270px);" />
      </div>

      <table class="table-width">
        <tr v-for="(item,index) in userBaseInfo.loanAppUvList" :key="index" class="tr-width">
          <td><div class="info-name">应用名</div></td>
          <td><div class="info">{{ item.appName }}</div></td>
          <td><div class="info-name">查看时间</div></td>
          <td><div class="info">{{ item.gmtDatetime }}</div></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserDetail',
  props: {
    userBaseInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      tableKey: 1
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
td{
  width: 25%;
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 500;
  color: #333;
  font-size: 20px;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  text-align: right;
  color:#666;
  font-size: 20px;
}
.title-con{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.title{
  margin-top: 0px;
  margin-left: 10px;
  font-size: 28px;
  font-weight: 400;
  /* border-bottom: 1px dashed #304156; */
  padding-bottom: 10px;
  vertical-align: middle;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid #304156 1px;
  padding: 20px 10px;
  border-radius: 10px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  width: 120px;
  margin: 0 10px;
  padding-bottom: 10px;
}
.link-title {
  height: 10px;
  display: inline-block;
  width: calc(100% - 175px);
  margin-left: 10px;
  border-top: dashed rgb(172, 176, 177) 2px;
}
.link-title-5 {
  height: 10px;
  display: inline-block;
  width: calc(100% - 199px);
  margin-left: 10px;
  border-top: dashed rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.line{
  display: inline-block;
  height: 28px;
  width: 4px;
  background: #425DE5;
  border-radius: 2px;
  vertical-align: -4px;
}
.table-width{
  width: 99%;
}
.tr-width{
  width: 99%;
}
table{
  letter-spacing:1.5px;
}
.info-img{
  width: 243px;
  height: 153px;
}
</style>
